/* eslint-disable no-unused-vars */
<template>
	<div ref="activistRef" class="game-container report-container">
		<editData
			v-if="showData"
			:rowData1="editData"
			:showData.sync="showData"
		></editData>
		<editRow
			v-else-if="showEdited"
			:rowData1="editedData"
			@close="closeEditRow"
		></editRow>
		<div v-else class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item
						:label="
							$t('operation.activity_list.select_merchant') + ':'
						"
						prop="merchantId"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:merchantInfo.sync="merchantInfoList"
							:placeholder="$t('common.please_choose')"
							@input="activitySel"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-input
							v-model="queryData.optionsValue"
							:placeholder="$t('common.please_enter')"
							clearable
							maxlength="20"
						>
							<el-select
								slot="prepend"
								v-model="queryData.name1"
								:placeholder="$t('common.please_choose')"
								style="width: 150px"
							>
								<el-option
									:label="
										$t('operation.activity_list.subject')
									"
									value="name"
								></el-option>
								<el-option
									:label="
										$t('operation.activity_list.main_title')
									"
									value="title"
								></el-option>
								<el-option
									:label="$t('common.last_updateBy')"
									value="operator"
								></el-option>
							</el-select>
						</el-input>
					</el-form-item>
					<el-form-item :label="$t('operation.activity_page') + ':'">
						<el-select
							v-model="queryData.tagId"
							style="width: 200px"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in [
									{
										id: undefined,
										activityNameVn: $t('common.all'),
										activityNameCn: $t('common.all'),
										activityNameEn: $t('common.all'),
										activityNameTh: $t('common.all')
									},
									...activitySelect
								]"
								:key="item.id"
								:label="
									item[
										getKey('activityName', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vn',
												th_TH: 'th'
											},
											index: 1,
											zh: true
										})
									]
								"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.activity_list.template')"
					>
						<el-select
							v-model="queryData.activityType"
							style="width: 200px"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<template
								v-for="item in [
									{
										code: undefined,
										description: $t('common.all')
									},
									...activityTypeStatus
								]"
							>
								<el-option
									v-if="
										['1', '4', undefined].includes(
											item.code
										)
									"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</template>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.activity_list.status') + ':'"
					>
						<el-select
							v-model="queryData.activityStatus"
							style="width: 200px"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in activityStatusStatus"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="time-options">
						<el-select
							v-model="queryData.timeOptionType"
							:placeholder="$t('common.please_choose')"
							style="width: 150px; margin-right: -5px"
						>
							<el-option
								:label="$t('operation.activity_list.show_time')"
								:value="1"
							></el-option>
							<el-option
								:label="$t('operation.activity_list.time')"
								:value="2"
							></el-option>
							<el-option
								:label="$t('common.last_updateAt')"
								:value="3"
							></el-option>
						</el-select>

						<el-date-picker
							v-model="searchTime"
							size="medium"
							:picker-options="pickerOptions1"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:clearable="true"
							:default-time="defaultTime"
							style="width: 375px"
							class="time-options-value"
						></el-date-picker>
					</el-form-item>

					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('503026')"
							type="warning"
							icon="el-icon-folder"
							:disabled="loading"
							size="medium"
							@click="add"
						>
							{{ $t('operation.activity_list.add') }}
						</el-button>
						<el-button
							v-if="hasPermission('503023')"
							type="warning"
							icon="el-icon-folder"
							:disabled="
								loading ||
									!(
										typeof queryData.merchantId ===
											'string' &&
										queryData.merchantId.length > 2
									)
							"
							size="medium"
							@click="openSortDialog"
						>
							{{ $t('operation.activity_list.sort') }}
						</el-button>
						<el-button
							type="success"
							icon="el-icon-sort"
							:disabled="loading"
							size="medium"
							@click="openColSettings"
						>
							{{ $t('common.row_set') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
					@sort-change="_changeTableSort"
				>
					<el-table-column
						key="index"
						type="index"
						align="center"
						:label="$t('common.serial_number')"
						width="100"
					>
						<template slot-scope="scope">
							<span>{{ getSerialNum(scope.$index) }}</span>
						</template>
					</el-table-column>
					<el-table-column
						key="name"
						prop="name"
						align="center"
						:label="$t('operation.activity_list.subject')"
						min-width="150"
					>
						<template slot-scope="scope">
							<el-link
								type="primary"
								:underline="false"
								@click="openActivityDetails(scope.row)"
							>
								{{ scope.row.name || '-' }}
							</el-link>
						</template>
					</el-table-column>
					<el-table-column
						key="tagName"
						prop="tagName"
						align="center"
						:label="$t('operation.activity_page')"
						min-width="120"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.tagName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						key="activityType"
						prop="activityType"
						align="center"
						:label="$t('operation.activity_list.template')"
						min-width="120"
					>
						<template slot-scope="scope">
							<span>
								{{
									filterActiveType(scope.row.activityType) ||
										'-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						key="title"
						prop="title"
						align="center"
						:label="$t('operation.activity_list.main_title')"
						min-width="160"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.title || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						key="showStartTime"
						prop="showStartTime"
						align="center"
						:label="$t('operation.activity_list.show_time')"
						min-width="160"
					>
						<template slot-scope="scope">
							<span
								v-if="
									scope.row.showStartTime ||
										scope.row.showEndTime
								"
							>
								{{ scope.row.showStartTime }}
								<br />
								<span>
									{{ scope.row.showEndTime }}
								</span>
							</span>
							<span v-else></span>
						</template>
					</el-table-column>
					<el-table-column
						key="activityStartTime"
						prop="activityStartTime"
						align="center"
						:label="$t('operation.activity_list.time')"
						min-width="160"
					>
						<template slot-scope="scope">
							<span
								v-if="
									scope.row.activityStartTime ||
										scope.row.activityEndTime
								"
							>
								{{ scope.row.activityStartTime }}
								<br />
								<span>
									{{ scope.row.activityEndTime }}
								</span>
							</span>
							<span v-else></span>
						</template>
					</el-table-column>
					<el-table-column
						key="updatedAt"
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
						min-width="160"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.updatedAt || '-' }}</span>
						</template>
					</el-table-column>

					<el-table-column
						key="operator"
						prop="operator"
						align="center"
						:label="$t('common.last_updateBy')"
						min-width="100"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.operator || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						key="status"
						prop="status"
						align="center"
						:label="$t('operation.activity_list.status')"
						min-width="120"
					>
						<template slot-scope="scope">
							<span
								v-if="
									scope.row.activityStatus ||
										scope.row.activityStatus === 0
								"
								:style="filterStyle(scope.row.activityStatus)"
							>
								{{
									filterActivityStatus(
										scope.row.activityStatus
									)
								}}
							</span>

							<span v-else>-</span>
						</template>
					</el-table-column>
					<!--  -->
					<el-table-column
						v-if="tableColumnData[$t('operation.activity_list.id')]"
						key="id"
						prop="id"
						align="center"
						:label="$t('operation.activity_list.id')"
						min-width="160"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.id || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('operation.activity_list.flow')]
						"
						key="validMultipleList"
						prop="validMultipleList"
						align="center"
						:label="$t('operation.activity_list.flow')"
						min-width="120"
					>
						<template slot-scope="scope">
							<span>
								{{
									(scope.row.validMultipleList &&
										scope.row.validMultipleList.join(
											','
										)) ||
										'-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t('operation.activity_list.device')
							]
						"
						key="deviceType"
						prop="deviceType"
						align="center"
						:label="$t('operation.activity_list.device')"
						min-width="160"
					>
						<template slot-scope="scope">
							<span>
								{{
									filterDeviceType(scope.row.deviceType) ||
										'-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t('operation.activity_list.object')
							]
						"
						key="inTypeUser"
						prop="inTypeUser"
						align="center"
						:label="$t('operation.activity_list.object')"
						min-width="120"
					>
						<template slot-scope="scope">
							<span>
								{{ filterDuiX(scope.row.inTypeUser) || '-' }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('operation.activity_list.venue')]
						"
						key="venue"
						prop="venue"
						align="center"
						:label="$t('operation.activity_list.venue')"
						min-width="180"
					>
						<template slot-scope="scope">
							<span
								class="nowrap"
								:title="filterVenue(scope.row.venue) || '-'"
							>
								{{ filterVenue(scope.row.venue) || '-' }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t('operation.activity_list.list_picture')
							]
						"
						key="listPicture"
						prop="listPicture"
						align="center"
						:label="$t('operation.activity_list.list_picture')"
						min-width="140"
					>
						<template slot-scope="scope">
							<!-- <span>{{ scope.row.listPicture || '-' }}</span> -->
							<el-link
								v-if="
									scope.row[
										getKey('pcListPicture', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vie',
												th_TH: 'th'
											},
											index: 0
										})
									] && scope.row.deviceType.includes('1')
								"
								type="primary"
								@click="
									handleImgShow(
										scope.row[
											getKey('pcListPicture', {
												map: {
													zh_CN: 'cn',
													en_US: 'en',
													vi_VN: 'vie',
													th_TH: 'th'
												},
												index: 0
											})
										]
									)
								"
							>
								{{ $t('operation.activity_list.preview') }}PC
							</el-link>
							<span v-else>-</span>
							<el-link
								v-if="
									scope.row[
										getKey('listPicture', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vie',
												th_TH: 'th'
											},
											index: 0
										})
									] &&
										['2', '3', '4', '5'].some((item) =>
											scope.row.deviceType.includes(item)
										)
								"
								type="primary"
								@click="
									handleImgShow(
										scope.row[
											getKey('listPicture', {
												map: {
													zh_CN: 'cn',
													en_US: 'en',
													vi_VN: 'vie',
													th_TH: 'th'
												},
												index: 0
											})
										]
									)
								"
							>
								{{ $t('operation.activity_list.preview') }}APP
							</el-link>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t('operation.activity_list.share_picture')
							]
						"
						key="sharePicture"
						prop="sharePicture"
						align="center"
						:label="$t('operation.activity_list.share_picture')"
						min-width="140"
					>
						<template slot-scope="scope">
							<!-- <span>{{ scope.row.listPicture || '-' }}</span> -->
							<el-link
								v-if="
									scope.row[
										getKey('pcSharePicture', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vie',
												th_TH: 'th'
											},
											index: 0
										})
									] && scope.row.deviceType.includes('1')
								"
								type="primary"
								@click="
									handleImgShow(
										scope.row[
											getKey('pcSharePicture', {
												map: {
													zh_CN: 'cn',
													en_US: 'en',
													vi_VN: 'vie',
													th_TH: 'th'
												},
												index: 0
											})
										]
									)
								"
							>
								{{ $t('operation.activity_list.preview') }}PC
							</el-link>
							<span v-else>-</span>
							<el-link
								v-if="
									scope.row[
										getKey('sharePicture', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vie',
												th_TH: 'th'
											},
											index: 0
										})
									] &&
										['2', '3', '4', '5'].some((item) =>
											scope.row.deviceType.includes(item)
										)
								"
								type="primary"
								@click="
									handleImgShow(
										scope.row[
											getKey('sharePicture', {
												map: {
													zh_CN: 'cn',
													en_US: 'en',
													vi_VN: 'vie',
													th_TH: 'th'
												},
												index: 0
											})
										]
									)
								"
							>
								{{ $t('operation.activity_list.preview') }}APP
							</el-link>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t('operation.activity_list.picture')
							]
						"
						key="masterPicture"
						prop="masterPicture"
						align="center"
						:label="$t('operation.activity_list.picture')"
						min-width="140"
					>
						<template slot-scope="scope">
							<!-- <span>{{ scope.row.listPicture || '-' }}</span> -->
							<el-link
								v-if="
									scope.row[
										getKey('pcMasterPicture', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vie',
												th_TH: 'th'
											},
											index: 0
										})
									] && scope.row.deviceType.includes('1')
								"
								type="primary"
								@click="
									handleImgShow(
										scope.row[
											getKey('pcMasterPicture', {
												map: {
													zh_CN: 'cn',
													en_US: 'en',
													vi_VN: 'vie',
													th_TH: 'th'
												},
												index: 0
											})
										]
									)
								"
							>
								{{ $t('operation.activity_list.preview') }}PC
							</el-link>
							<span v-else>-</span>
							<el-link
								v-if="
									scope.row[
										getKey('masterPicture', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vie',
												th_TH: 'th'
											},
											index: 0
										})
									] &&
										['2', '3', '4', '5'].some((item) =>
											scope.row.deviceType.includes(item)
										)
								"
								type="primary"
								@click="
									handleImgShow(
										scope.row[
											getKey('masterPicture', {
												map: {
													zh_CN: 'cn',
													en_US: 'en',
													vi_VN: 'vie',
													th_TH: 'th'
												},
												index: 0
											})
										]
									)
								"
							>
								{{ $t('operation.activity_list.preview') }}APP
							</el-link>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<!--  -->
					<el-table-column
						v-if="tableColumnData[$t('common.actions')]"
						key="operating"
						prop="operating"
						align="center"
						:label="
							tableColumnData[$t('common.actions')]
								? $t('common.actions')
								: ''
						"
						width="300"
					>
						<template slot-scope="scope">
							<el-button
								v-if="
									Number(scope.row.status) !== 0 &&
										hasPermission('503024')
								"
								:disabled="
									loading ||
										[4, 5, 6].includes(
											scope.row.activityStatus &&
												scope.row.activityStatus
										)
								"
								type="danger"
								size="medium"
								class="noicon"
								@click="changeStatus(scope.row, 0)"
							>
								{{ $t('operation.activity_list.stop') }}
							</el-button>
							<el-button
								v-if="
									Number(scope.row.status) !== 1 &&
										hasPermission('503024')
								"
								:disabled="
									loading ||
										[4, 6].includes(
											scope.row.activityStatus &&
												scope.row.activityStatus
										)
								"
								type="success"
								size="medium"
								class="noicon"
								@click="changeStatus(scope.row, 1)"
							>
								{{ $t('common.start_up') }}
							</el-button>
							<el-button
								v-if="hasPermission('503025')"
								type="primary"
								icon="el-icon-edit"
								:disabled="
									[1, 2, 3, 4, 6].includes(
										scope.row.activityStatus &&
											scope.row.activityStatus
									)
								"
								size="medium"
								@click="edit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
							<el-button
								v-if="hasPermission('503027')"
								type="primary"
								icon="el-icon-edit"
								size="medium"
								@click="activityData(scope.row)"
							>
								{{ $t('operation.activity_list.data') }}
							</el-button>

							<el-button
								v-if="hasPermission('503028')"
								type="danger"
								icon="el-icon-delete"
								:disabled="
									[1, 2, 3].includes(
										scope.row.activityStatus &&
											scope.row.activityStatus
									)
								"
								size="medium"
								@click="del(scope.row)"
							>
								{{ $t('common.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="tableData.length > 0"
					class="pageValue"
					:current-page.sync="pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="[10, 20, 50, 100, 200]"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
			<el-dialog
				v-if="showImg"
				:close-on-click-modal="false"
				:visible.sync="showImg"
				center
				:title="$t('common.image')"
				@close="
					showImg = false
					imgBig = ''
				"
			>
				<div
					style="display: flex; justify-content: center; align-items: center"
				>
					<el-image
						:src="imgBig"
						class="image-column-list-item-list-item-image"
					>
						<div slot="error" class="image-error-slot">
							<p>{{ $t('operation.activity_list.no') }}</p>
						</div>
					</el-image>
				</div>
			</el-dialog>
			<el-dialog
				:title="$t('operation.activity_list.add')"
				:visible.sync="createDialog.visible"
				:destroy-on-close="true"
				width="480px"
				@close="onClose"
			>
				<el-form
					v-if="createDialog.visible"
					ref="createForm"
					:model="createDialog.form"
					:rules="rules"
					label-width="auto"
				>
					<el-form-item
						:label="
							$t('operation.activity_list.select_merchant') + ':'
						"
						prop="merchantId"
					>
						<merchant-select
							v-model="createDialog.form.merchantId"
							:merchantInfo.sync="merchantInfoAdd"
							:placeholder="$t('common.please_choose')"
							@input="activitySel"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.activity_list.template') + ':'"
						prop="activityTemplate"
					>
						<el-select
							v-model="createDialog.form.activityTemplate"
							style="width: 260px"
							clearable
							:placeholder="
								$t(
									'operation.activity_list.select_activity_template'
								)
							"
							:popper-append-to-body="false"
						>
							<template v-for="item in activityTypeStatus">
								<el-option
									v-if="
										['1', '4', undefined].includes(
											item.code
										)
									"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</template>
						</el-select>
					</el-form-item>
				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click="createDialog.visible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="subAddOrEidt">
						{{ $t('common.confirm') }}
					</el-button>
				</div>
			</el-dialog>
			<el-dialog
				:title="$t('operation.activity_list.sort')"
				:visible.sync="sortDialog.visible"
				:destroy-on-close="true"
				width="90%"
				custom-class="sort-dialog"
			>
				<div class="tags-list-group">
					<div
						v-for="(items, i) in sortDialog.data"
						:key="i"
						class="list-wrapper"
					>
						<div class="top">
							<span class="tag-name">
								{{ $t('operation.activity_page') }}：{{
									items[
										getKey('tagName', {
											map: {
												zh_CN: 'cn',
												en_US: 'en',
												vi_VN: 'vi',
												th_TH: 'th'
											},
											zh: true,
											index: 0
										})
									]
								}}
							</span>
							<div class="sort-btn">
								<div
									class="btn"
									@click="sortActivity('down', i)"
								>
									<i class="el-icon-caret-bottom"></i>
								</div>
								<div class="btn" @click="sortActivity('up', i)">
									<i class="el-icon-caret-top"></i>
								</div>
							</div>
						</div>
						<div class="list-items">
							<div
								v-for="(item, j) in items.data"
								:key="j"
								class="item"
								:class="{
									active:
										sortDialog.currentTag === i &&
										sortDialog.active === j
								}"
								@click="onChecked(i, j)"
							>
								<span class="index">{{ j + 1 }}</span>
								<span class="activity-name">
									{{ item.name }}
								</span>
							</div>
						</div>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="sortDialog.visible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="saveSort">
						{{ $t('common.save') }}
					</el-button>
				</div>
			</el-dialog>

			<el-dialog
				:title="$t('common.row_set')"
				center
				:visible.sync="colSettings.visible"
				width="475px"
				class="setting-div"
			>
				<!-- <div>
					<el-link type="primary" @click="clickDel">复原缺省</el-link>
				</div> -->
				<div
					v-for="(value, name1) in activityListField"
					:key="name1"
					class="setting-div"
				>
					<el-checkbox v-model="dialogColumnData[name1]">
						{{ name1 }}
					</el-checkbox>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="colSettings.visible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="handleOrderList">
						{{ $t('common.submit') }}
					</el-button>
				</div>
			</el-dialog>
			<el-dialog
				:title="$t('operation.activity_list.detail')"
				:visible.sync="activityDetails.visible"
				:destroy-on-close="true"
				width="600px"
				@close="onClose"
			>
				<el-row :gutter="20" class="activityDetails">
					<el-col :span="24" :offset="0" style="display: flex">
						{{ $t('operation.activity_list.id') }}：
						<Copy
							v-if="activityDetails.data.id"
							:title="activityDetails.data.id"
							:copy="copy"
						/>
					</el-col>

					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_list.status') }}：
						<span
							v-if="
								activityDetails.data.activityStatus ||
									activityDetails.data.activityStatus === 0
							"
							:style="
								filterStyle(activityDetails.data.activityStatus)
							"
						>
							{{
								filterActivityStatus(
									activityDetails.data.activityStatus
								)
							}}
						</span>
						<span v-else>-</span>
					</el-col>
					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_list.subject') }}：{{
							activityDetails.data.name || '-'
						}}
					</el-col>
					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_page') }}：{{
							activityDetails.data.tagName || '-'
						}}
					</el-col>
					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_list.template') }}：{{
							filterActiveType(
								activityDetails.data.activityType
							) || '-'
						}}
					</el-col>
					<el-col
						:span="24"
						:offset="0"
						style="display: flex; align-items: center"
					>
						{{ $t('operation.activity_list.main_title') }}：
						<span>
							<div>
								{{
									activityDetails.data.cnTitle
										? `${$t('common.zh')}:
																${activityDetails.data.cnTitle}`
										: ''
								}}
							</div>
							<div>
								{{
									activityDetails.data.enTitle
										? `${$t('common.en1')}: ${
												activityDetails.data.enTitle
										  }`
										: ''
								}}
							</div>
							<div>
								{{
									activityDetails.data.thTitle
										? `${$t('common.th1')}: ${
												activityDetails.data.thTitle
										  }`
										: ''
								}}
							</div>
							<div>
								{{
									activityDetails.data.vieTitle
										? `${$t('common.vn1')}: ${
												activityDetails.data.vieTitle
										  }`
										: ''
								}}
							</div>
						</span>
					</el-col>
					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_list.show_device') }}：{{
							filterDeviceType(activityDetails.data.deviceType) ||
								'-'
						}}
					</el-col>
					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_list.object') }}：{{
							filterDuiX(activityDetails.data.inTypeUser) || '-'
						}}
					</el-col>
					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_list.time') }}：{{
							activityDetails.data.activityStartTime
						}}
						<span v-if="activityDetails.data.cycle !== 2">
							~
							{{ activityDetails.data.activityEndTime }}
						</span>
					</el-col>
					<el-col :span="24" :offset="0">
						{{ $t('operation.activity_list.show_time') }}：{{
							activityDetails.data.showStartTime || '-'
						}}
						<span v-if="activityDetails.data.cycle !== 2">
							~
							{{ activityDetails.data.showEndTime }}
						</span>
					</el-col>
				</el-row>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { getUserInfo } from '@/utils/auth'
import { promotionList } from '@/api/operation'
import editData from './components/editData'
import editRow from './components/editRow'
import dayjs from 'dayjs'
const name = 'activityList'
// const startTime = dayjs()
// 	.startOf('day')
// 	.valueOf()
// const endTime = dayjs()
// 	.endOf('day')
// 	.valueOf()
export default {
	name,
	components: {
		editData,
		editRow
	},
	mixins: [list],
	data() {
		return {
			//
			showImg: false,
			imgBig: '',
			loading: false,
			// 数据
			showData: false,
			editData: {},
			// 编辑
			showEdited: false,
			editedData: {},
			activitySelect: [],
			name: 'name',
			searchTime: [
				dayjs().startOf('day') - 3600 * 1000 * 24 * 91,
				dayjs().endOf('day')
			],
			queryData: {
				merchantId: '',
				timeOptionType: 1,
				optionsValue: '',
				name1: 'name',
				activityStatus: undefined
			},
			tableData: [],
			createDialog: {
				visible: false,
				form: {
					activityTemplate: undefined
				}
			},
			sortDialog: {
				visible: false,
				currentTag: '',
				active: '',
				data: []
			},
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			activityDetails: {
				visible: false,
				data: {}
			},
			activityListField: {
				// 序号: true,
				// 活动名称: true,
				// 活动页签: true,
				// 活动模板: true,
				// 活动主标题: true,
				// 展示时间: true,
				// 活动时间: true,
				// 最后操作时间: true,
				// 最后操作人: true,
				// 活动状态: true,
				//
				[this.$t('operation.activity_list.id')]: false,
				[this.$t('operation.activity_list.flow')]: false,
				[this.$t('operation.activity_list.device')]: false,
				[this.$t('operation.activity_list.object')]: false,
				[this.$t('operation.activity_list.venue')]: false,
				[this.$t('operation.activity_list.list_picture')]: false,
				[this.$t('operation.activity_list.share_picture')]: false,
				[this.$t('operation.activity_list.picture')]: false,
				[this.$t('common.actions')]: true
			},
			merchantInfoAdd: {},
			merchantInfoList: {}
		}
	},
	computed: {
		terminalTypeArr() {
			return this.globalDics.operateLoadingClient || []
		},
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		activityStatusStatus() {
			return this.globalDics.activityConfigActivityStatus || []
		},
		activityTypeStatus() {
			return this.globalDics.activityType || []
		},
		operateTagIds() {
			return this.globalDics.tagId || []
		},
		rules() {
			return {
				activityTemplate: [
					{
						required: true,
						message: this.$t(
							'operation.activity_list.select_activity_template'
						),
						trigger: ['change', 'blur']
					}
				],
				merchantId: [
					{
						required: true,
						message: this.$t('common.components.select_merchant'),
						trigger: ['change', 'blur']
					}
				]
			}
		},
		merchantId() {
			const userInfo = getUserInfo()
			return userInfo ? userInfo.merchantId : '0'
		},
		activityName() {
			const map = {
				THB: 'activityNameTh',
				CNY: 'activityNameCn',
				VND: 'activityNameVn',
				vi_VN: 'activityNameVn',
				en_US: 'activityNameEn',
				zh_CN: 'activityNameCn',
				th_TH: 'activityNameTh'
			}
			const data = this.merchantInfoList
			const language = data && data.languages
			if (!language) return 'activityNameCn'
			const array = language.split(',').map((item) => map[item])
			const currency = data.currency
			const res = array.includes(map[currency]) ? map[currency] : array[0]
			return res
		}
		// tagName() {
		// 	const map = {
		// 		THB: 'thTagName',
		// 		CNY: 'cnTagName',
		// 		VND: 'viTagName',
		// 		vi_VN: 'viTagName',
		// 		en_US: 'enTagName',
		// 		zh_CN: 'cnTagName',
		// 		th_TH: 'thTagName'
		// 	}
		// 	const data = this.merchantInfoList
		// 	const language = data && data.languages
		// 	if (!language) return 'cnTagName'
		// 	const array = language.split(',').map((item) => map[item])
		// 	const currency = data.currency
		// 	const res =
		// 		(array.includes(map[currency]) ? map[currency] : array[0]) ||
		// 		'cnTagName'
		// 	return res
		// }
	},
	watch: {
		'queryData.merchantId': {
			handler() {
				this.activitySel()
			},
			immediate: true
		},
		'queryData.name1': {
			handler() {
				this.queryData.optionsValue = ''
			}
		}
	},
	created() {
		this.initIndexDB('activityList', this.activityListField)
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		filterVenue(va) {
			if (!va) return '-'
			const venue = []
			this.globalDics.bwVenueList?.length > 0 &&
				this.globalDics.bwVenueList.map((val) => {
					if (va?.split(',').includes(val.code)) {
						venue.push(val.description)
					}
				})
			return venue.length && venue.join(',')
		},
		handleImgShow(img) {
			this.showImg = true
			this.imgBig = img || ''
		},
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		filterActivityStatus(val) {
			return this.activityStatusStatus[val]?.description || '-'
		},
		filterStyle(val) {
			if (val && val === 3) {
				return `color:#008000`
			} else if (val && val === 5) {
				return `color:#f90103`
			}
		},
		filterDuiX(val) {
			return {
				1: this.$t('operation.all_member'),
				2: this.$t('operation.activity_list.in_member'),
				3: this.$t('operation.activity_list.agent_member')
			}[val]
		},
		filterDeviceType(val) {
			if (!val) return '-'
			const data = []
			val.split(',').map((v) => {
				v !== '' && data.push(v)
			})
			const deviceType = []
			this.loginDeviceType &&
				this.loginDeviceType?.length > 1 &&
				this.loginDeviceType.map((v) => {
					if (data.includes(v.code)) {
						return v.description && deviceType.push(v.description)
					}
				})

			return deviceType && deviceType.join(',')
		},
		activitySel() {
			const params = {
				merchantClientId: this.queryData.merchantId,
				pageNum: 1,
				pageSize: 99
			}
			params.merchantClientId
				? promotionList(params)
						.then((res) => {
							if (res?.code === 200) {
								this.activitySelect = res.data || []
							}
							this.loading = false
						})
						.catch(() => {
							this.loading = false
						})
				: ((this.activitySelect = []), (this.loading = false))
		},
		filterActiveType(val) {
			return {
				1: this.$t('operation.activity_list.deposit_activity'),
				4: this.$t('operation.activity_list.activity')
			}[val]
		},
		// 保存前端排序
		saveSort() {
			if (!this.hasPermission('503023')) return
			const sortDadas = []
			this.sortDialog.data.map((dadas) => {
				Object.keys(dadas).map((val, index) => {
					if (val === 'data') {
						dadas[val] &&
							dadas[val].map((v, i) => {
								delete v.name
								v.sort = i + 1
								sortDadas.push(v)
								// return v
							})
					}
				})
			})
			if (sortDadas.length > 0) {
				this.$api
					.activitySaveSort({ data: sortDadas })
					.then((res) => {
						if (res?.code === 200) {
							this.$message.success(
								this.$t('common.action_success')
							)
							this.sortDialog.visible = false
						}
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			}
		},
		initList() {},
		// loadData() {
		// 	this.loadData()
		// },
		loadData() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.loading = true
					if (
						this.queryData.merchantId === '' ||
						this.queryData.merchantId == null
					) {
						this.tableData = []
						this.total = 0
						this.pageNum = 1
						setTimeout(() => {
							this.loading = false
						}, 300)
						return
					}
					const [startTime, endTime] = this.searchTime || []
					const params = {
						exportFlag: true,
						...this.getParams(),
						queryCondition: {
							...this.queryData,
							[this.queryData.name1]: this.queryData.optionsValue,
							startTime:
								(startTime &&
									dayjs(startTime).format(
										'YYYY-MM-DD HH:mm:ss'
									)) ||
								undefined,
							endTime:
								(endTime &&
									dayjs(endTime).format(
										'YYYY-MM-DD HH:mm:ss'
									)) ||
								undefined
						}
					}
					delete params.queryCondition.optionsValue
					delete params.queryCondition.name1
					this.$api
						.activityConfigList(params)
						.then((res) => {
							if (res?.code === 200) {
								const { record, totalRecord } = res.data || {}
								this.tableData = Array.isArray(record)
									? Object.freeze(record)
									: []
								this.total = totalRecord || 0
							}
							this.loading = false
						})
						.catch(() => {
							this.loading = false
						})
				}
			})
		},
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			this.dialogColumnData = {}
			this.dialogColumnData = {
				// 序号: true,
				// 活动名称: true,
				// 活动页签: true,
				// 活动模板: true,
				// 活动主标题: true,
				// 展示时间: true,
				// 活动时间: true,
				// 最后操作时间: true,
				// 最后操作人: true,
				// 活动状态: true,
				//
				[this.$t('operation.activity_list.id')]: false,
				[this.$t('operation.activity_list.flow')]: false,
				[this.$t('operation.activity_list.device')]: false,
				[this.$t('operation.activity_list.object')]: false,
				[this.$t('operation.activity_list.venue')]: false,
				[this.$t('operation.activity_list.list_picture')]: false,
				[this.$t('operation.activity_list.share_picture')]: false,
				[this.$t('operation.activity_list.picture')]: false,
				[this.$t('common.actions')]: true
			}
		},
		reset() {
			this.queryData = {
				merchantId: '',
				timeOptionType: 1,
				optionsValue: '',
				name1: 'name',
				activityStatus: undefined
			}
			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
			}
			this.searchTime = [
				dayjs().startOf('day') - 3600 * 1000 * 24 * 91,
				dayjs().endOf('day')
			]
			this.loadData()
		},
		changeStatus(val) {
			const status = val.status === 0 ? 1 : 0
			this.$confirm(
				`<strong>${this.$t('operation.activity_list.is')} ${
					val.name
				} ${this.$t('operation.activity_list.in')}${
					val.status === 0
						? this.$t('common.start_up')
						: this.$t('common.disabled')
				}${this.$t(
					'common.actions'
				)}?</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
					'operation.switch_status_tips2'
				)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.sure'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api
						.activityUpdateStatus({ id: val.id, status: status })
						.then((res) => {
							if (res?.code === 200) {
								this.loadData()
							}
						})
				})
				.catch(() => {})
		},
		add() {
			this.title = this.$t('common.add')
			this.merchantInfoAdd = {}
			this.createDialog.form = {
				merchantId: this.merchantId !== '0' ? this.merchantId : ''
			}
			this.createDialog.visible = true
		},
		edit(rowData) {
			return this.$router.push({
				path:
					'/operation/activityManage/activityList/components/editRow',
				query: {
					id: rowData.id,
					name1: rowData.activityType,
					activityTypeStatus: this.activityTypeStatus
				}
			})
		},
		closeEditRow(val) {
			this.showEdited = val
		},
		// 数据
		activityData(rowData) {
			const name = rowData.title || ''
			window.localStorage.setItem('routerName', name)
			const routeData = this.$router.resolve({
				path:
					'/operation/activityManage/activityList/components/editData',
				query: {
					title: rowData.title,
					entranceEnable: rowData.entranceEnable,
					id: rowData.id,
					merchantId: rowData.merchantId,
					activityType: rowData.activityType,
					name1: this.filterActiveType(rowData.activityType)
				}
			})
			window.open(routeData.href, '_blank')
		},
		// 活动名称的详情，
		openActivityDetails(rowData) {
			this.loading = true
			this.$api
				.activityDetails({ id: rowData?.id || null })
				.then((res) => {
					if (res?.code === 200) {
						this.activityDetails.visible = true
						this.activityDetails.data = res.data
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		del(val) {
			const data = {}
			data.id = val.id
			this.$confirm(
				`<strong>${this.$t(
					'operation.activity_list.delete'
				)}?</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.sure'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.loading = true
					this.$api.activityDelete(data).then((res) => {
						if (res?.code === 200) {
							this.$message.success(
								this.$t('common.delete_success')
							)
							this.loading = false
							this.pageNum =
								(this.total - 1) % this.pageSize === 0
									? this.pageNum - 1
									: this.pageNum
							if (this.pageNum) {
								this.loadData()
							}
						}
					})
				})
				.catch(() => {
					this.loading = false
				})
		},

		subAddOrEidt() {
			this.$refs.createForm.validate((valid) => {
				if (valid) {
					this.editedData = {
						name: this.createDialog.form.activityTemplate,
						name1: this.createDialog.form.activityTemplate,
						activityTypeStatus: this.activityTypeStatus
					}
					this.merchantInfoAdd &&
						Object.keys(this.merchantInfo).length &&
						this.$router.push({
							path:
								'/operation/activityManage/activityList/components/addRow',
							query: {
								merchantId: this.createDialog.form.merchantId,
								name: '',
								name1: this.createDialog.form.activityTemplate,
								merchantInfo: Object.keys(this.merchantInfoAdd)
									.length
									? JSON.stringify(this.merchantInfoAdd)
									: JSON.stringify(this.merchantInfo)
							}
						})
					this.createDialog.visible = false
				}
			})
		},
		_changeTableSort({ column, prop, order }) {
			const obj = {
				showStartTime: 1,
				activityStartTime: 2,
				updatedAt: 3
			}
			this.queryData.orderKey = obj[prop]
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		onClose() {
			this.$refs.createForm && this.$refs.createForm.resetFields()
		},
		openSortDialog() {
			this.$api
				.activityQuerySort({ merchantId: this.queryData.merchantId })
				.then((res) => {
					if (res?.code === 200) {
						this.sortDialog.data = res.data
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
			this.sortDialog.visible = true
		},
		onChecked(i, j) {
			this.sortDialog.active = j
			this.sortDialog.currentTag = i
		},
		sortActivity(orderType, i) {
			if (i !== this.sortDialog.currentTag) return

			const activityList = this.sortDialog.data[i].data

			const j = this.sortDialog.active

			const current = Object.assign({}, activityList[j])

			if (orderType === 'down') {
				if (j === activityList.length - 1) return

				const next = Object.assign({}, activityList[j + 1])

				;[activityList[j], activityList[j + 1]] = [next, current]

				this.sortDialog.active += 1
			} else {
				if (j === 0) return

				const prev = Object.assign({}, activityList[j - 1])

				;[activityList[j], activityList[j - 1]] = [prev, current]

				this.sortDialog.active -= 1
			}
			this.sortDialog.currentTag = i
			this.sortDialog
		}
	}
}
</script>

<style lang="scss" scoped>
.time-options {
	::v-deep .el-select {
		.el-input__inner {
			color: #909399;
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
			background-color: #f5f7fa;
			border: 1px solid #dcdfe6 !important;
		}
	}

	::v-deep .el-date-editor {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}
}

::v-deep .el-dialog__header {
	border-bottom: 1px solid #00000015;
}

.activityDetails {
	.el-col {
		margin-bottom: 20px;
	}
}

::v-deep .sort-dialog {
	min-width: 745px;
}

.tags-list-group {
	display: flex;
	justify-content: space-between;
	user-select: none;

	.list-wrapper {
		padding: 10px;
		background: #f5f5f5;
		border-radius: 5px;
		flex: 1;
		margin-right: 20px;
	}

	.top {
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.tag-name {
			font-size: 14px;
			font-weight: bold;
			color: #00a8ef;
		}

		.sort-btn {
			display: flex;

			.btn {
				font-size: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 24px;
				height: 24px;
				background-color: #169bd5;
				color: #fff;
				border-radius: 5px;
				cursor: pointer;

				&:hover {
					background-color: #2db4ef;
				}

				&:active {
					background-color: #5ec8f5;
				}
			}

			.btn:first-child {
				margin-right: 5px;
			}
		}
	}

	.list-items {
		height: 300px;
		overflow: auto;

		.item {
			margin-bottom: 10px;
			cursor: pointer;
			padding: 5px 0;

			&:hover {
				background-color: #c4e0e9;
			}

			&:active {
				background-color: #bcdae3;
			}
		}

		.active {
			background-color: #bcdae3;
		}

		.index {
			color: #00a8ef;
			margin-right: 10px;
		}

		.activity-name {
		}
	}
}

.setting-div {
	display: inline-block;
	margin: 5px;
	min-width: 100px;
}

// ::v-deep .el-dialog__header {
// 	text-align: center;
// 	color: #909399;
// 	font-weight: 700;
// }
// ::v-deep  .tagheight .el-tag {
// 	height: 24px;
// 	line-height: 24px;
// 	min-width: 60px;
// }
// ::v-deep  .rempadding .el-dialog__body {
// 	padding: 0;
// 	padding-bottom: 30px;

// 	.contentBox,
// 	form {
// 		padding: 0 20px;
// 	}
// }
// ::v-deep .el-input-number__decrease,
// ::v-deep .el-input-number__increase {
// 	display: none;
// }
// ::v-deep .el-input-number--medium .el-input__inner {
// 	padding: 0 15px;
// 	text-align: left;
// }

// .decoration {
// 	text-decoration: underline;
// 	cursor: pointer;
// }
// .bodyBox {
// 	max-height: 400px;
// 	overflow: auto;
// }
// p {
// 	display: flex;
// 	height: 40px;
// 	line-height: 40px;
// 	border-bottom: 1px solid #e8e8e8;
// 	justify-content: space-around;
// 	span {
// 		display: inline-block;
// 		width: 50%;
// 		text-align: center;
// 	}
// }
// .headerBox {
// 	color: #000000d8;
// 	background: #fafafa;
// 	font-family: 'PingFang SC ', 'PingFang SC', sans-serif;
// 	font-weight: 650;
// 	border-top: 1px solid #e8e8e8;
// 	margin-top: 15px;
// }
.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
